<template>
    <div>
      <el-button
          size="mini"
          type="primary"
          @click="showAddUser()">新增用户</el-button>
    <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="创建时间"
      prop="createTime">
    </el-table-column>
    <el-table-column
      label="真实姓名"
      prop="realName">
    </el-table-column>
    <el-table-column
      label="手机号"
      prop="phone">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" >
        <!-- <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/> -->
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="用户头像" label-width="120px">
     <el-avatar :src="form.userPhotoUrl">
      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
     </el-avatar>
     <el-upload
        class="upload-demo"
        action=""
        :multiple="false"
        :show-file-list="false"
        :http-request="upload"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
     </el-upload>
    </el-form-item>
    <el-form-item label="用户名称" label-width="120px">
      <el-input v-model="form.userName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="真实姓名" label-width="120px">
      <el-input v-model="form.realName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" label-width="120px">
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" label-width="120px">
      <el-input v-model="form.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" label-width="120px"> 
      <el-input v-model="form.password" autocomplete="off" type="password" disabled>
      <el-button slot="append" icon="el-icon-refresh-right" @click="resetPwd(form.phone)">重置</el-button>
      </el-input>
    </el-form-item>
    <el-form-item label="图片识别剩余次数" label-width="150px">
      <el-input v-model="form.photoDistinguishNum" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="权限等级" label-width="120px">
      <!-- <el-input v-model="form.role[0].roleName" autocomplete="off"></el-input> -->
      <el-select v-model="value" placeholder="请选择">
            <el-option
            v-for="item in Role"
            :key="item.value"
            :label="item.roleName"
            :value="item.id">
            </el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateUser()">确 定</el-button>
  </div>
  </el-dialog>
  <add-user :show="dialogAddUserShow" ref="adduser" @OK="initData()"></add-user>
</div>
</template>

<script>
import { AxiosGet,AxiosPost } from "../../axios";
import AddUser from './AddUser.vue'
export default {
    name: 'UserIndex',

    data() {
        return {
        tableData: [],
        search: '',
        dialogFormVisible:false,
        dialogAddUserShow:false,
        form: {},
        Role: [],
        value:'',
        addUserList:{},
        addUserRole:[],
        RoleValue:''
    };
    },
    components:{
      AddUser
    },
    mounted() {
    
        this.initData()
    },  

    methods: {
        initData(){
            this.getUserAll()
        },
        showAddUser(){
          this.$refs.adduser.show()
          this.dialogAddUserShow=true
          console.log("点击新增用户");
        },
        addUser(){
          console.log(this.addUserList);
        },
        upload(param) {
          console.log(this.form.phone);
            const formData = new FormData()
            formData.append('file', param.file)
            AxiosPost('photo/upload/'+this.form.phone, formData).then(data => {
              console.log(data)
              this.form.userPhotoUrl = data.data +"?temp=" + Math.random()
            }).catch(response => {
              console.log('图片上传失败'+response)
            })
          },
        getUserAll(){
            AxiosGet('user/findAll').then(sucess=>{
                this.tableData=sucess.data
                console.log(sucess.data);
            })
        },
        handleEdit(index, row) {
          
                this.form=[]
                this.Role = []
                this.value = row.role[0].roleName
                AxiosGet('role/selectAll').then(sucess=>{
                    sucess.data.forEach((element,index) => {
                        if(index != 0){
                            this.Role.push(element)
                        }
                    });
                })
                this.form = row
                this.dialogFormVisible=true
          
            
        },
        handleDelete(index, row) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                AxiosPost('user/delUser',row).then(sucess=>{
                  console.log(sucess);
                    if(sucess.status==200){
                      this.$notify({title: 'sucess',message: '删除成功',type: 'success'});
                      this.initData()
                    }
                })
              }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        resetPwd(phone){
           AxiosGet('user/resetPwd/'+phone).then(sucess=>{
               this.form.password = sucess.data
               this.$notify({title: 'sucess',message: '重置密码成功,新密码为:123456',type: 'success'});
           });
        },
        updateUser(){
            let user = this.form
            this.Role.forEach(item=>{
                if(this.value == item.id){
                    user.role = [item]
                }
            })
            AxiosPost('user/updateUser',user).then(sucess=>{
                if(sucess.status==200){
                  this.$notify({title: 'sucess',message: '保存成功',type: 'success'});
                  this.dialogFormVisible=false
                }
            })
        }
    },
};
</script>

<style scoped>

</style>